<template>
   <div class="header">
<div class="header-left">
  <div class="iconfont icon-fanhui"></div>
</div>
<div class="header-input">
      <span class="iconfont icon-sousuo"></span>
   输入城市/景点/游玩主题</div>
   <router-link to="/city">
   <div class="header-right">{{this.$store.state.city}}
     <span class="iconfont icon-jiantou"></span>
</div>
   </router-link>

   </div>
</template>
<script>
export default {
    name:'HomeHeader'
}
</script>
<style lang="stylus" scoped>
  // 调用公用样式变量
 @import '~styles/varibles.styl'
   .header
      display:flex
      line-height:$headerHeight
      background :$bgColor
      color:#fff
      .header-left
         width:.64rem
         float:left
         .icon-fanhui
            text-align: center
            font-size: .4rem
      .header-input
         flex:1
         background #fff
         border-radius:.1rem
         line-height .64rem
         height .64rem 
         margin-top :.12rem
         margin-left :.2rem
         color:#ccc
         padding-left :.2rem
      .header-right
         min-width: 1rem
         padding: 0 .1rem
         float: right
         text-align: center
         color: #fff
         .icon-jiantou
            margin-left: -.04rem
            font-size: .2rem      
</style>

